<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notification 通知</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="element-ui/index.css">
</head>
<body>
<div id="app">
    <el-button @click="open1">右上角</el-button>
    <el-button @click="open2">右下角</el-button>
    <el-button @click="open3">左下角</el-button>
    <el-button @click="open4">左上角</el-button>

    <el-button @click="open5">中间</el-button>
</div>

<!-- 先引入vue -->
<script src="js/vue.js"></script>
<!-- 再引入ElementUI组件库 -->
<script src="element-ui/index.js"></script>
<script>
    new Vue({
        el: "#app",
        methods: {
            open1() {
                this.$notify({
                    title: "默认位置",
                    message: "右上角弹出的消息",
                    type: "info"
                });
            },

            open2() {
                this.$notify({
                    title: "自定义位置",
                    message: "右下角弹出的消息",
                    type: "success",
                    position: "bottom-right"
                });
            },

            open3() {
                this.$notify({
                    title: "自定义位置",
                    message: "左下角弹出的消息",
                    type: "warning",
                    position: "bottom-left"
                });
            },

            open4() {
                this.$notify({
                    title: "自定义位置",
                    message: "左上角弹出的消息",
                    type: "error",
                    position: "top-left"
                });
            },
            open5() {
                this.$notify({
                    title: "自定义位置",
                    message: "中间弹出的消息",
                    type: "error",
                    position: "center"
                });
            }
        }
    });
</script>
</body>
</html>